<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		#list{
			display: none;
			width: 200px;
			background-color: pink;
		}
		.show{
			display: block;
		}
	</style>
</head>
<body>
	<button id="btn">下拉切换</button>
	<ul id="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
	<script>
		var btn = document.getElementById("btn");
		var list = document.getElementById("list");
		btn.onclick = function(){
			console.log( list.style.display );//因为 js 的 el.style.样式,取到的是元素的行间样式,第一次点击没有行间样式 取到的是一个 "",所以进行比较的时候 "" 和"none" 不相等,所以判定为false
			if( list.style.display == "none" ){ // 如果当前元素 display为none
//				显示 list
				list.style.display = "block";
			}else{
//				隐藏 list
				list.style.display = "none";
			}
		}
	</script>
</body>
</html>
